@charset "utf-8";



/*效果*/

@keyframes pulse {

  from {

    transform: scale3d(1, 1, 1);

  }



  50% {

    transform: scale3d(1.05, 1.05, 1.05);

  }



  to {

    transform: scale3d(1, 1, 1);

  }

}



.pulse {

  animation-name: pulse;

}



@keyframes bounceInLeft {

  from, 60%, 75%, 90%, to {

    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  }



  0% {

    opacity: 0;

    transform: translate3d(-3000px, 0, 0);

  }



  60% {

    opacity: 1;

    transform: translate3d(25px, 0, 0);

  }



  75% {

    transform: translate3d(-10px, 0, 0);

  }



  90% {

    transform: translate3d(5px, 0, 0);

  }



  to {

    transform: none;

  }

}



.bounceInLeft {

  animation-name: bounceInLeft;

}



@keyframes bounceInRight {

  from, 60%, 75%, 90%, to {

    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  }



  from {

    opacity: 0;

    transform: translate3d(3000px, 0, 0);

  }



  60% {

    opacity: 1;

    transform: translate3d(-25px, 0, 0);

  }



  75% {

    transform: translate3d(10px, 0, 0);

  }



  90% {

    transform: translate3d(-5px, 0, 0);

  }



  to {

    transform: none;

  }

}



.bounceInRight {

  animation-name: bounceInRight;

}



@keyframes fadeInDown {

  from {

    opacity: 0;

    transform: translate3d(0, -100%, 0);

  }



  to {

    opacity: 1;

    transform: none;

  }

}



.fadeInDown {

  animation-name: fadeInDown;

}



@keyframes fadeInRight {

  from {

    opacity: 0;

    transform: translate3d(100%, 0, 0);

  }



  to {

    opacity: 1;

    transform: none;

  }

}



.fadeInRight {

  animation-name: fadeInRight;

}



@keyframes zoomIn {

  from {

    opacity: 0;

    transform: scale3d(.3, .3, .3);

  }



  50% {

    opacity: 1;

  }

}



.zoomIn {

  animation-name: zoomIn;

}



@keyframes zoomInUp {

  from {

    opacity: 0;

    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);

    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);

  }



  60% {

    opacity: 1;

    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);

    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);

  }

}



.zoomInUp {

  animation-name: zoomInUp;

}



@keyframes rollIn {

  from {

    opacity: 0;

    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);

  }



  to {

    opacity: 1;

    transform: none;

  }

}



.rollIn {

  animation-name: rollIn;

}



@keyframes bounceIn {

  from, 20%, 40%, 60%, 80%, to {

    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);

  }



  0% {

    opacity: 0;

    transform: scale3d(.3, .3, .3);

  }



  20% {

    transform: scale3d(1.1, 1.1, 1.1);

  }



  40% {

    transform: scale3d(.9, .9, .9);

  }



  60% {

    opacity: 1;

    transform: scale3d(1.03, 1.03, 1.03);

  }



  80% {

    transform: scale3d(.97, .97, .97);

  }



  to {

    opacity: 1;

    transform: scale3d(1, 1, 1);

  }

}



.bounceIn {

  animation-name: bounceIn;

}









/*首页渐出效果*/

.js .animate-box {

  opacity: 0;

}





.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}



.animated.infinite {

  -webkit-animation-iteration-count: infinite;

  animation-iteration-count: infinite;

}



.animated.hinge {

  -webkit-animation-duration: 2s;

  animation-duration: 2s;

}



.animated.bounceIn,

.animated.bounceOut {

  -webkit-animation-duration: .75s;

  animation-duration: .75s;

}



.animated.flipOutX,

.animated.flipOutY {


  -webkit-animation-duration: .75s;

  animation-duration: .75s;

}





@-webkit-keyframes fadeInUp {

  from {

    opacity: 0;

    /*-webkit-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);*/

    -webkit-transform: translate3d(0, 40px, 0);

    transform: translate3d(0, 40px, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



@keyframes fadeInUp {

  from {

    opacity: 0;

    /*-webkit-transform: translate3d(0, 100%, 0);

    transform: translate3d(0, 100%, 0);*/

    -webkit-transform: translate3d(0, 40px, 0);

    transform: translate3d(0, 40px, 0);

  }



  to {

    opacity: 1;

    -webkit-transform: none;

    transform: none;

  }

}



.fadeInUp {

  -webkit-animation-name: fadeInUp;

  animation-name: fadeInUp;

}

/*END 首页渐出效果*/